/* eslint-disable no-empty */
<!-- 142 -->
<template>
  <div>
    <a-space class="common-button-group">
      <a-button type="primary" :loading="searchBtnLoading" @click="querySearch">{{ $t('common_query') }}</a-button>
    </a-space>
    <t-query-form layout="inline"
      ref="queryForm"
      group="MachineHistory"
      :model="queryForm"
      >
          <a-form-item :label="$t('T9_shopId')" name="shopId" prop="shopId" :rules="{ required: true, message: $t('T9_shopId'), trigger: 'change'}">
            <a-select v-model:value="queryForm.shopId" class="t9-form-wideget-input-default" @change="changeShopId" allow-clear>
              <a-select-option v-for="item in shopIdArr"
              :key="item.shopId" :value="item.shopId">
              {{item.shopId}}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item :label="$t('T9_bayId')" name="bayId" prop="bayId" :rules="{ required: true, message: $t('T9_bayId'), trigger: 'change'}">
            <a-select v-model:value="queryForm.bayId" class="t9-form-wideget-input-default" @change="changebayId"  show-search allow-clear>
              <a-select-option v-for="item in bayIdArr"
              :key="item.bayId" :value="item.bayId">
              {{item.bayId}}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item :label="$t('T9_eqpId')" name="eqpId" prop="eqpId" :rules="{ required: true, message: $t('T9_eqpId'), trigger: 'change'}">
            <a-select v-model:value="queryForm.eqpId" class="t9-form-wideget-input-default" @change="changeEqpId"  show-search allow-clear>
              <a-select-option v-for="item in eqpIdArr"
              :key="item.eqpId" :value="item.eqpId">
              {{item.eqpId}}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item :label="$t('T9_unitId')" name="unitId">
            <a-select v-model:value="queryForm.unitId" class="t9-form-wideget-input-default"  show-search allow-clear>
              <a-select-option v-for="item in unitIdArr"
              :key="item.unitId" :value="item.unitId">
              {{item.unitId}}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item :label="$t('T9_date')" name="Date" prop="Date" :rules="{ required: true, message: $t('t9_date')}">
            <a-range-picker
              :show-time="{ format: 'HH:mm:ss' }"
              :default-value="queryForm.Date"
              format="YYYY-MM-DD HH:mm:ss"
              @ok="onChange"
            />
          </a-form-item>
          <a-form-item :label="$t('T9_eqpId')" name="eqpId">
              <a-input v-model:value="queryForm.eqId" />
          </a-form-item>
    </t-query-form>
    <a-row type="flex" justify="space-between" align="middle" class="global-oper-row mt-2">
      <a-col :span="15" class="global-oper-row-title">{{ $t('T9_machineHistory') }}</a-col>
      <a-col :span="8" class="global-oper-row-extra">
        <a-button @click="exportExl" type="primary">{{ $t('T9_toExcel') }}</a-button>
      </a-col>
    </a-row>
    <t-table
      :data="table.list"
    >
      <t-column min-width="100" field="eventTime" :title="$t('T9_eventTime')" />
      <t-column min-width="100" field="eventName" :title="$t('T9_eventName')" />
      <t-column min-width="100" field="eqpId" :title="$t('T9_eqpId')" />
      <t-column min-width="100" field="ifmode" :title="$t('T9_ifmode')" />
      <t-column min-width="100" field="machineState" :title="$t('T9_machineState')" />
      <t-column min-width="100" field="oldEqpState" :title="$t('T9_oldEqpState')" />
      <t-column min-width="100" field="eqpHoldState" :title="$t('T9_eqpHoldState')" />
      <t-column min-width="100" field="eventUser" :title="$t('T9_eventUser')" />
      <t-column min-width="100" field="eventComment" :title="$t('T9_eventComment')" />
      <t-column min-width="100" field="reasonCodeType" :title="$t('T9_reasonCodeType')" />
      <t-column min-width="100" field="reasonCode" :title="$t('T9_reasonCode')" />
      <t-column min-width="100" field="operationMode" :title="$t('T9_operationMode')" />
      <t-column min-width="100" field="alarmText" :title="$t('T9_alarmText')" />
      <t-column min-width="100" field="alarmTime" :title="$t('T9_alarmTime')" />
      <t-column min-width="100" field="alarmCode" :title="$t('T9_alarmCode')" />
      <t-column min-width="100" field="controlSite" :title="$t('T9_controlSite')" />
      <t-column min-width="100" field="dueDate" :title="$t('T9_dueDate')" />
      <t-column min-width="100" field="runMode" :title="$t('T9_runMode')" />
    </t-table>
  </div>
</template>

<script>
  import { defineComponent } from 'vue'
  import moment from 'moment'
  import { downloadBlobFile } from '@/utils/download'
  import {
    getShopId,
    getBayId,
    getEqpId,
    getUnitId,
    getList
  } from '@/api/common'
  import { getCurrentDate } from '@/utils/utils'

  export default defineComponent({
    name: 'MachineHistory',
    components: {},
    data() {
      return {
        searchBtnLoading: false,
        table: {
          list: []
        },
        shopIdArr: [],
        eqpIdArr: [],
        bayIdArr: [],
        unitIdArr: [],
        queryForm: {
          shopId: 'ARRAY',
          bayId: '',
          eqpId: '',
          eqId: '',
          unitId: undefined,
          Date: []
        }
      }
    },
    computed: {},
    watch: {},
    created() {
      this.queryForm.Date = [moment(getCurrentDate(), 'YYYY-MM-DD HH:mm:ss'), moment(getCurrentDate(1), 'YYYY-MM-DD HH:mm:ss')]
      this.getShopId()
    },
    methods: {
      onChange(value) {
        this.queryForm.Date = value
      },
      changeShopId(val) {
        if (val) {
          getBayId(val).then(res => {
            this.bayIdArr = res
          })
        }
      },
      changeEqpId(val) {
        const params = {
          eqpId: this.queryForm.eqpId
        }
        if (val) {
          getUnitId(params).then(res => {
            this.unitIdArr = res
          })
        }
      },
      getShopId() {
        const params = {
        }
        getShopId(params).then(res => {
          this.shopIdArr = res
        })
      },
      querySearch() {
        this.$refs.queryForm.validate().then(() => {
          this.getList()
        })
      },
      changebayId() {
        const params = {
          shopId: this.queryForm.shopId,
          bayId: this.queryForm.bayId
        }
        getEqpId(params).then(res => {
          this.eqpIdArr = res
        })
      },
      exportExl() {
        if (!this.table.list.length) return
        const params = {
          dtoName: 'MachineHistoryDTO',
          startTime: this.queryForm.Date.length !== 0 ? this.queryForm.Date[0].format('YYYYMMDDHHmmss') * 1000000 : null,
          endTime: this.queryForm.Date.length !== 0 ? this.queryForm.Date[1].format('YYYYMMDDHHmmss') * 1000000 : null,
          queryId: 'GetMachineHistoryList',
          eqpId: this.queryForm.unitId || (this.queryForm.eqId || this.queryForm.eqpId),
          version: '80001',
          menuName: 'machineHistory',
          usage: 'queryMachineHistoryList',
          export: true
        }
        getList(params).then(res => {
          downloadBlobFile(res, 'machineHistory')
        })
      },
      getList() {
        const obj = {
          dtoName: 'MachineHistoryDTO',
          startTime: this.queryForm.Date.length !== 0 ? this.queryForm.Date[0].format('YYYYMMDDHHmmss') * 1000000 : null,
          endTime: this.queryForm.Date.length !== 0 ? this.queryForm.Date[1].format('YYYYMMDDHHmmss') * 1000000 : null,
          queryId: 'GetMachineHistoryList',
          eqpId: this.queryForm.unitId || (this.queryForm.eqId || this.queryForm.eqpId),
          version: '80001',
          menuName: 'machineHistory',
          usage: 'queryMachineHistoryList'
        }
        getList(obj).then(res => {
          this.table.list = res
        })
      }
    }
  })
</script>
<style lang="less" scoped>
.t9-form-wideget-input-default {
  width: 150px;
}
</style>
